<template>
  <div class="album-slider">
    <div class="slider-container">
      <template v-for="(album, idx) in albumList" :key="album.id">
        <div class="slider-item" :class="current === idx ? 'current-slider-item' : 'item'" @click="current = idx"
          :style="getItemStyle(idx)">
          <ElImage :src="album.cover" alt="" class="img" fit="cover" />
          <transition name="fade-slide">
            <div v-if="current === idx"
              class="slider-info w-full max-w-[340px] sm:max-w-[300px] md:max-w-[300px] lg:max-w-[340px] xl:max-w-[500px]">
              <h2>{{ album.name }}</h2>
              <div class="desc">{{ album.description }}</div>
              <div class="meta">
                <span>
                  <el-icon><el-icon-user /></el-icon>
                  {{ album.userName || '未知' }}
                </span>
                <span>
                  <el-icon><el-icon-date /></el-icon>
                  {{ formatDate(album.createdAt) }}
                </span>
                <span>
                  <el-icon><el-icon-picture /></el-icon>
                  共 {{ album.count || 0 }} 张
                </span>
              </div>
              <RouterLink :to="`/photos/${album.id}`">
                <el-button type="primary" size="large">More
                  <el-icon><el-icon-arrow-right /></el-icon>
                </el-button>
              </RouterLink>
            </div>
          </transition>
        </div>
      </template>
    </div>
    <div class="slider-arrows">
      <el-button @click="switchCurrent(-1)"><el-icon><el-icon-arrow-left /></el-icon></el-button>
      <el-button @click="switchCurrent(1)"><el-icon><el-icon-arrow-right /></el-icon></el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElIcon, ElImage } from 'element-plus'
import {
  Picture as ElIconPicture,
  User as ElIconUser,
  Calendar as ElIconDate,
  ArrowLeft as ElIconArrowLeft,
  ArrowRight as ElIconArrowRight,
} from '@element-plus/icons-vue'
import { fecthAlbumList } from '@/service/module/album'
const albumList = ref([])
const current = ref(0)

const fetchData = async () => {
  const res = await fecthAlbumList()
  albumList.value = res.list
}
const getItemStyle = (index) => {
  const diff = index - current.value
  let x = 0
  const y = '-50%'
  if (diff > 0) {
    x = (diff - 1)
  } else if (diff === 0) {
    return {
    }
  } else {
    x = (albumList.value.length - current.value + index - 1)
  }
  console.log(x)
  return {
    transform: `translate(calc(${x * 100}% + ${20 * x}px), ${y})`
  }
}
const switchCurrent = (diff) => {
  if (current.value + diff < 0) {
    current.value = albumList.value.length - 1
  } else if (current.value + diff >= albumList.value.length) {
    current.value = 0
  } else {
    current.value += diff
  }
}
onMounted(fetchData)
function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.toLocaleDateString()
}
</script>

<style lang="scss" scoped>
.album-slider {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow:hidden;
  .slider-container {
    gap: 10px;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    .slider-item {
      position: absolute;
      transition: all 0.5s ease-in-out;

      .img {
        height: 100%;
        width: 100%;
        /* object-fit: cover; */
        /* border-radius: 18px; */
        transition: all 0.2s cubic-bezier(.34, 1.56, .64, 1);
      }

      &.item {
        width: 200px;
        height: 300px;
        left: 50%;
        top: 50%;
        z-index: 2;
        border-radius: 18px;
        /* overflow: hidden; */
        /* background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); */

        background: rgba(255, 255, 255, 0.8);
        box-shadow:
            0 8px 32px 8px rgba(60, 60, 60, 0.18),
            0 0 32px 8px rgba(99, 102, 241, 0.10),
            0 0 0 12px rgba(99, 102, 241, 0.06),
            inset 0 -12px 32px 0 rgba(60, 60, 60, 0.18),
              // 下方内阴影
            inset 0 2px 8px 0 rgba(99, 102, 241, 0.10); // 顶部微弱内阴影
        filter: blur(0.5px); // 轻微整体柔化
        cursor: pointer;
        .img {
          border-radius: 18px;
          display: block;
        }
        &:hover {
          box-shadow:
              0 16px 48px 16px rgba(31, 38, 135, 0.28),
              0 0 48px 16px rgba(99, 102, 241, 0.16),
              0 0 0 18px rgba(99, 102, 241, 0.09),
              inset 0 -16px 36px 0 rgba(60, 60, 60, 0.22),
              inset 0 2px 12px 0 rgba(99, 102, 241, 0.13);
          .img {
            transform: scale(1.05);
            filter: brightness(1.1) saturate(1.2);
          }
        }
      }
            @media screen and (max-width: 768px) {
              &.item {
                width: 20vw;
                height: 30vw;
                top: 70%;
              }
            }
      &.current-slider-item {
        transform: translate(0, 0);
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 0;

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, rgba(24, 29, 40, 0.92) 0%, rgba(24, 29, 40, 0.32) 60%, rgba(255, 255, 255, 0.05) 100%);
          z-index: 2;
          pointer-events: none;
        }
      }
    }

    .slider-info {
      position: absolute;
      left: 60px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 11;
      /* width: 340px; */
      color: #fff;
      pointer-events: auto;
      width: auto;
      h2 {
        font-size: 2.6rem;
        font-weight: bold;
        margin-bottom: 18px;
        letter-spacing: 2px;
        text-shadow: 0 2px 12px #2228;
        opacity: 0;
        animation: fadeInUp 0.7s 0.1s forwards;
      }

      .desc {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 18px;
        color: #e0e7ff;
        text-shadow: 0 2px 8px #2226;
        opacity: 0;
        animation: fadeInUp 0.7s 0.3s forwards;
      }

      .meta {
        display: flex;
        gap: 18px;
        font-size: 1rem;
        margin-bottom: 22px;
        opacity: 0;
        animation: fadeInUp 0.7s 0.5s forwards;

        span {
          display: flex;
          align-items: center;
          gap: 4px;

          el-icon {
            font-size: 1.1em;
          }
        }
      }

      .el-button {
        font-size: 1.1rem;
        padding: 8px 28px;
        border-radius: 20px;
        box-shadow: 0 2px 12px #6366f1;
        opacity: 0;
        animation: fadeInUp 0.7s 0.7s forwards;
      }
    }

    /* 文字切换动画 */
    .fade-slide-enter-active,
    .fade-slide-leave-active {
      transition: opacity 0.5s, transform 0.5s;
    }

    .fade-slide-enter-from,
    .fade-slide-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
  }

  .slider-arrows {
    z-index: 3;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 18px;
    z-index: 2;

    .el-button {
        background: linear-gradient(135deg, #6366f1 0%, #60a5fa 100%);
        color: #fff;
        border: none;
        box-shadow:
          0 4px 16px 0 rgba(99, 102, 241, 0.25),
          0 1.5px 6px 0 rgba(60, 60, 60, 0.10);
        font-size: 1.5rem;
        width: 80px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.3s,
          color 0.3s,
          box-shadow 0.3s,
          transform 0.2s cubic-bezier(.34, 1.56, .64, 1);
    
        &:hover {
          background: linear-gradient(135deg, #60a5fa 0%, #6366f1 100%);
          color: #fff;
          box-shadow:
            0 8px 32px 0 #6366f1cc,
            0 2px 8px 0 #60a5fa99;
          transform: scale(1.12) rotate(-8deg);
          filter: brightness(1.12) drop-shadow(0 0 8px #60a5fa88);
        }
    
        &:active {
          transform: scale(0.98) rotate(0deg);
          filter: brightness(0.95);
        }
      }
  }

  /* 文字切换动画 */
  .fade-slide-enter-active,
  .fade-slide-leave-active {
    transition: opacity 0.5s, transform 0.5s;
  }

  .fade-slide-enter-from,
  .fade-slide-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  /* 文字逐项淡入动画 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>